<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>

    <div></div>
    <p>p1</p>
    <p>p2</p>
</body>
<script>
    // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级) A的子孙
    let spans = $("div span");
    alert(spans.length);
    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级) A的儿子
    let spans2 = $("div>span");
    alert(spans2.length);
    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    let jq1 = $("div+p");
    alert(jq1.html());
    // 4. 兄弟选择器 $("A ~ B");    A相邻的后面的所有B
    let jq2=$("div~p");
    jq2.each(function (i,ele) {
        alert(i+":"+ele.innerHTML)
    })
    
</script>
</html>